:global {
    * {
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
    }
    body {
        margin: 0px;
        overflow: hidden;
    }
    #container{
        background-color: #009876;
        display: flex;
        flex: 1;
        flex-direction: row;
        justify-content: center;
    }
}
.app {
    display: flex;
    flex-direction: column;
    width: 480px;
    height: 960px;
    background-color: #e02b58;
    box-shadow: inset 0px 0px 15px 2px #fff;
    border-radius: 20px;
    color: #ffe604;
    & > .top {
        display: flex;
        height: 38px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    & > .middle {
        display: flex;
        flex: 1;
        flex-direction: row;
        & > .left{
            width: 20px;
        }
        & > .main {
            display: flex;
            flex: 1;
            background: #9ead86;
            border: 5px solid;
            border-color: #333 #555 #555 #333;
            box-shadow: 0px 0px 5px 0px #ffffff;
            & > .screen {
                display: flex;
                flex: 1;
            }
            & > .states {
                display: flex;
                flex: 1;
            }
        }
        & > .right{
            width: 32px;
        }
    }
    & > .bottom {
        height: 488px;
    }
}